<template>
  <view class="model-essay-box">
    <scroll-view scroll-x="true">
      <view class="model-essay-content">
        <view class="model-essay-item" v-for="(item, index) in textbookWritingList" :key="index">
          <view class="zw-default-text1 one_line f15">{{item.title}}</view>
          <view class="content f14">
            <text class="title-case">题目分析</text>
            <text class="content-text three_lines">{{item.content}}</text>
          </view>
          <view class="way-box flex flex-center">
            <view class="small-box flex flex-column flex-center">
              <img :src="img.timu" class="offside-ico" mode="widthFix">
              <text class="f12">题目分析</text>
            </view>
            <view class="youjiantou"></view>
            <view class="small-box flex flex-column flex-center">
              <img :src="img.timu" class="offside-ico" mode="widthFix">
              <text class="f12">名师指导</text>
            </view>
            <view class="youjiantou"></view>
            <view class="small-box flex flex-column flex-center">
              <img :src="img.timu" class="offside-ico" mode="widthFix">
              <text class="f12">推荐范文</text>
            </view>
            <view class="youjiantou"></view>
            <view class="small-box flex flex-column flex-center">
              <img :src="img.timu" class="offside-ico" mode="widthFix">
              <text class="f12">精选素材</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>

export default {
  name: 'textbookWriting',
  props: {
    textbookWritingList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      img: {
        timu: 'https://file.bendiclass.com/oss/upload/image/png/68392e7e915b3bb718c7d7cc0d7b429d.png',
        mingshi: 'https://file.bendiclass.com/oss/upload/image/png/7278e8fad0ee147e94c10db45d03574b.png',
        fanwen: 'https://file.bendiclass.com/oss/upload/image/png/e96867ba1df690b62fd45d8c1c2a88a4.png',
        sucai: 'https://file.bendiclass.com/oss/upload/image/png/cc08b8765549e365b404b813c10fddad.png'
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.model-essay-content {
  display: flex;
  flex-direction: row;
  .model-essay-item {
    width: 630rpx;
    padding: 38rpx 28rpx;
    margin: 20rpx 16rpx 20rpx 20rpx;
    box-sizing: border-box;
    flex: 1 0 630rpx;
    background: #ffffff;
    border-radius: 26rpx;
    box-shadow: rgba(178, 178, 178, 0.33) 0px 0px 20rpx 0px;
    // box-shadow: 0px 0px 20px 0px rgba(178,178,178,0.33);
    .content {
      position: relative;
      margin: 18rpx 0 20rpx;
      color: $uni-text-color01;
      margin-bottom: 20rpx;
      .title-case {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 8rpx;
        border: 1px solid #c0c0c0;
        padding: 0 6rpx;
        font-size: 24rpx;
        font-weight: 600;
        color: #424242;
      }
      .content-text {
        text-indent: 4em;
      }
    }
    .youjiantou {
      width: 38rpx;
      height: 38rpx;
      color: rgba(57, 161, 255, 0.66);
      margin: 0 8rpx;
      background: url("https://file.bendiclass.com/oss/upload/image/png/9689d28581035cbb51057b74ba24c384.png")
        no-repeat center;
      background-size: 100% 100%;
      transform: rotate(270deg);
    }
    .way-box {
      position: relative;
      .small-box {
        padding-top: 20rpx;
        color: #4D4D4D;
        .offside-ico {
          width: 40rpx;
          height: 40rpx;
          margin-bottom: 14rpx;
        }
      }
    }
  }
}
</style>
